<template>
  <div>
    <login-header></login-header>
    <div class="log_bg">
      <div class="top">
        <div class="logo">
          <a href="" @click.prevent="toIndex()"><img src="@/assets/images/logo.png" /></a>
        </div>
      </div>
      <div class="login">
        <div class="log_img">
          <img src="@/assets/images/l_img.png" width="611" height="425" />
        </div>
        <div class="log_c">
          <form>
            <table border="0" style="width: 370px; font-size: 14px; margin-top: 30px" cellspacing="0" cellpadding="0">
              <tr height="50" valign="top">
                <td width="55">&nbsp;</td>
                <td>
                  <span class="fl" style="font-size: 24px">登录</span>
                  <span class="fr">还没有商城账号，<a href="#" @click.prevent="toRegister"
                      style="color: #ff4e00">立即注册</a></span>
                </td>
              </tr>
              <tr height="70">
                <td>用户名</td>
                <td><input type="text" value="" class="l_user" v-model="loginName" /></td>
              </tr>
              <tr height="70">
                <td>密&nbsp; &nbsp; 码</td>
                <td><input type="password" value="" class="l_pwd" v-model="password" /></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td style="font-size: 12px; padding-top: 20px">
                  <span style="font-family: '宋体'" class="fl">
                    <label class="r_rad"><input type="checkbox" /></label><label class="r_txt">请保存我这次的登录信息</label>
                  </span>
                  <span class="fr"><a href="#" @click.prevent="toForgetPassword" style="color: #ff4e00">忘记密码</a></span>
                </td>
              </tr>
              <tr height="60">
                <td>&nbsp;</td>
                <td><input type="button" @click="toLogin" value="登录" class="log_btn" /></td>
              </tr>
            </table>
          </form>
        </div>


      </div>
    </div>
    <footer-down></footer-down>
  </div>

</template>

<script>
import FooterDown from '../components/FooterDown.vue';
import LoginHeader from '@/components/LoginHeader.vue';
import { mapMutations } from 'vuex'
export default {

  components: { LoginHeader, FooterDown },
  name: "LoginView",
  data() {
    return {
      jwtData: null,
      token: '',

      loginName: '',
      password: '',

    }

  },
  methods: {
    ...mapMutations(['setShowPage']),
    toIndex() {
      if (!(this.$route.path === '/')) {
        this.$router.push({ name: 'index' })
      }
    },
    toLogin() {
      this.$axios({
        url: '/login',
        params: { loginName: this.loginName, password: this.password }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          console.log(rs.data)
          this.token = rs.data.jwtData.jwt;
          this.userName = rs.data.jwtData.userName;
          window.sessionStorage.setItem('token', this.token);
          const tokenJson = this.parseJwt(this.token);
          window.sessionStorage.setItem('userId', tokenJson.userId);
          window.sessionStorage.setItem('userType', tokenJson.userType);
          window.sessionStorage.setItem('userName', this.userName);
          console.log(tokenJson)
          console.log(this.userName)
          console.log(window.sessionStorage.getItem('userId'))
          console.log(window.sessionStorage.getItem('userType'))
          alert("登录成功！")
          this.setShowPage(0)
          this.$router.push('/')
        } else {
          alert(rs.data.msg)
        }
      })
    },
    toRegister() {
      this.setShowPage(1)
      this.$router.push('/regist')
    },
    toForgetPassword() {
      this.setShowPage(1)
      this.$router.push('/forgetPassword')
    },
    parseJwt(token) {
      try {
        // JWT令牌由三部分组成，中间用点分隔
        const base64Url = token.split('.')[1];
        // 将Base64URL转换为Base64
        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        // 解码Base64并处理编码问题
        const jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));

        return JSON.parse(jsonPayload);
      } catch (e) {
        console.error('解析JWT失败:', e);
        return null;
      }
    }
  },
  mounted() {
    this.setShowPage(1)
  }

}


</script>

<style scoped>

</style>